<script lang="ts">
  import Header from "../../components/Header/Header.svelte";
  import "../app.css";
  import LeftTop from "./LeftTop/LeftTop.svelte";
  import LeftBottom from "./LeftBottom/LeftBottom.svelte";
  import RightTop from "./RightTop/RightTop.svelte";
  import RightTopDetail from "./RightTop/RightTopDetail.svelte";
  // import RightTop1 from "../index/RightTop/RightTop.svelte";
  import RightMiddle from "./RightMiddle/RightMiddle.svelte";
  import RightMiddleDetail from "./RightMiddle/RightMiddleDetail.svelte";
  import RightBottom from "./RightBottom/RightBottom.svelte";
  import RightBottomDetail from "./RightBottom/RightBottomDetail.svelte";
  import CenterTop from "./CenterTop/CenterTop.svelte";
  import CenterMiddle from "./CenterMiddle/CenterMiddle.svelte";
  import CenterBottom from "./CenterBottom/CenterBottom.svelte";
  import LeftMiddle from "./LeftMiddle/LeftMiddle.svelte";
  import { HeaderType } from "../../components/Header/type";

  const urlParams = new URLSearchParams(window.location.search);
  const type = urlParams.get("type") || 1;

  // const type = urlParams.get('type') || HeaderType.electronic;

  import { devices } from "./stores";
  const isDetail = devices.isDetail;
</script>

<main class="flex flex-col items-center h-full">
  <div class="w-full m-b--1">
    <Header type={+type} />
  </div>
  <div class="flex flex-1 gap-5 w-full mb-5 overflow-hidden">
    <div class="ml-5 basis-1/3">
      <div class="h-2/5">
        <LeftTop />
      </div>
      <div class="h-2/5">
        <LeftMiddle />
      </div>
      <div class="h-1/5">
        <LeftBottom />
      </div>
    </div>
    <div class="basis-1/2">
      <div class="h-1/5">
        <CenterTop />
      </div>
      <div class="h-3/5">
        <CenterMiddle />
      </div>
      <div class="h-1/5">
        <CenterBottom />
      </div>
    </div>
    {#if $isDetail}
      <div class="mr-5 basis-1/3 h-full">
        <div class="h-1/2">
          <RightTopDetail />
        </div>
        <div class="h-1/4">
          <RightMiddleDetail />
        </div>
        <div class="h-1/4">
          <RightBottomDetail />
        </div>
      </div>
    {:else}
      <div class="mr-5 basis-1/3 h-full">
        <div class="h-1/3">
          <RightTop />
        </div>
        <div class="h-1/3">
          <RightMiddle />
        </div>
        <div class="h-1/3">
          <RightBottom />
        </div>
      </div>
    {/if}
  </div>
</main>

<style>
  .m-b--1 {
    /*margin-bottom: -1%;*/
  }
</style>
